import React, { Component } from 'react';
import '../../assets/css/login.css'
class login extends Component {
    state = {
        form:{
        // 用户名
        name:'',
        // 密码
        pwd:'',
        // 单选
        rem:'',
        // 手机号
        hm:'',
        // 岗位
        gw:'',
        // 邮箱
        yx:'',
        // 部门
        bm:'',
        // 备注
        bz:'',
        // 角色
        dengLu:false,
        roles:[],
        },
        
        rolesData:[
            {id: 1 , name:'金刚'},
            {id: 2 , name:'芭比'},
            {id: 3 , name:'金刚芭比'}
        ],
    }
    setValue(e){
        const type = e.target.type
        let  name = e.target.name
        let value = e.target.value
        
        if(type === 'checkbox'){
            // 以上一层确定是复选框
            if(name.endsWith('[]')){
                // 以上两层确定是多选
                name = name.replace('[]','')
                if(e.target.checked){
                    this.setState(state => ({
                        [name]:[...new Set([...state.form[name],value])]
                    }))
            }else{
                this.setState(state =>  ({
                    [name] : state.form[name].filter(item => item !== value )
                }) )
            }
        }else{
        this.setState(state => ({
            [name]:!this.state.form[name]
        }))
    }
    }else{
        this.setState({
            [name]:value
        })
    }
    
}
    showData(){
        console.log(this.state)
    }
    render() {
        return (
            <div>
                
                <h2>基本信息</h2>
                <hr/>
                <div className='box'>
                <div className='left'>
                {/* 文本框 */}
                <label>
                用户名称 : &nbsp;
                <input placeholder={'请输入用户名'} name="name" type='text' value={this.state.name} onChange={this.setValue.bind(this)}/>
                </label>
                
                <br></br>
                <label>
                手机号码 : &nbsp;
                <input placeholder={'请输入手机号'} name="hm" type='text' value={this.state.hm} onChange={this.setValue.bind(this)}/>
                </label>
                

                {/* 单选框 */}
                <div>
                    用户性别 : &nbsp;
                    男&nbsp;<input type="radio" value='1' name="rem" checked={this.state.rem === '1'? true : false} onChange={this.setValue.bind(this)} />
                    女&nbsp;<input type="radio" value='0' name="rem" checked={this.state.rem === '0'? true : false} onChange={this.setValue.bind(this)} />
                </div>
                <label>
                岗<span></span>位 : &nbsp;
                <input placeholder={'请输入您的岗位'} name="gw" type='text' value={this.state.gw} onChange={this.setValue.bind(this)}/>
                </label>
                <div>
                角<span></span>色 : &nbsp;
                <ul>
                    {
                        this.state.rolesData.map(item => 
                            (<li key={item.id}>
                                <input type="checkbox" name="roles[]" value={item.id} onChange={this.setValue.bind(this)}/>
                                <i>{item.name}</i>                               
                            </li>)
                        )
                    }
                </ul>
                </div>
                </div>

                <div className='right'>
                <label>
                归属部门 : &nbsp;
                <input placeholder={'请输入您的部门'} name="bm" type='text' value={this.state.bm} onChange={this.setValue.bind(this)}/>
                </label>
                <br/>
                <label>
                邮<span></span>箱 : &nbsp;
                <input placeholder={'请输入Emil'} name="yx" type='text' value={this.state.yx} onChange={this.setValue.bind(this)}/>
                </label>
                <br/>
                <label>
                登录密码 : &nbsp;
                <input placeholder={'请输入密码'} name="pwd" type='text' value={this.state.pwd} onChange={this.setValue.bind(this)}/>
                </label>
                <br/>
                <label>
                登陆状态:
                <input type="checkbox" name="dengLu" checked={this.state.dengLu}  onChange={this.setValue.bind(this)} />
                </label>
                
                </div>
                </div>
                
                <h2>其他信息</h2>
                
                <hr/>
                
                <div className='footer'>
                <label>
                    <b>备<span></span>注 : &nbsp;</b>
                <input placeholder={'请输入...'} name="bz" type='text' value={this.state.bz} onChange={this.setValue.bind(this)}/>
                </label>
                    <br/>
                    <button className='z' onClick={this.showData.bind(this),this.props.addForm(form)} >
                        保存
                    </button>
                    <button className='y'>
                        关闭
                    </button>

                </div>
            </div>
            
        );
    }
}

export default login;
